<template>
  <view id="business">
    <view class="top">
      <image src="/static/机油.jpg"></image>
    </view>
    <view class="content">
      <view class="content-top">
        美孚（Mobill）金装美孚1号0W-30全合成机油润滑油
      </view>
      <view class="content-center1"> 规格：全合成 | 0W-30 | 4L </view>
      <view class="content-center2"> 众多原厂认证 高效节油 强劲动力 </view>
      <view class="content-bottom1">
        <view class="price">￥439</view>
        <view class="img"><image src="/static/箭头.png"></image></view>
        <view class="oldprice">送100%红包</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "business",
  data() {
    return {};
  },
};
</script>

<style lang="scss">
#business {
  border-radius: 20rpx;
  overflow: hidden;
  background-color: #fff;
  margin-top: 20rpx;
  display: flex;
  .top {
    padding: 20rpx;
    width: 50%;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    padding: 20rpx;
    .content-top {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .content-center1 {
      font-size: 20rpx;
      color: #9b9b9b;
      margin-top: 10rpx;
    }
    .content-center2 {
      font-size: 20rpx;
      color: #9b9b9b;
      margin-top: 10rpx;

    }
    .content-bottom1 {
      margin-top: 10rpx;  
      background-color: #fc4424;
      width: 75%;
      text-align: center;
      color: #fff;
      display: flex;
      justify-content: space-between;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 10rpx;
      overflow: hidden;
      .price{
        width: 40%;
      }
      .img{
        // border: 1px solid black;
        width: 40rpx;
        image{
          width: 110%;
          height: 51rpx;
        }
      }
      .oldprice{
        background-color: #fcebc8;
        color: #fc6c4c;
        font-size: 28rpx;
        width: 60%;
      }
    }
  }
}
</style>